<script setup lang="ts">
import { getArticleDetailApi } from '@/api/article'
import { onLoad } from '@dcloudio/uni-app'
import type { ArticleItem } from '@/types/article'
import { ref } from 'vue'
const query = defineProps<{
  id: string
}>()
onLoad(() => {
  getArticleDetail()
})

const articleItem = ref<ArticleItem>()
const getArticleDetail = async () => {
  const res = await getArticleDetailApi(query.id)
  articleItem.value = res.data
}
</script>
<template>
  <view class="example-body">
    <uni-title type="h2" :title="articleItem?.title" align="center"></uni-title>
    <view>
      <rich-text class="uni-text" :nodes="articleItem?.content"></rich-text>
    </view>
  </view>
  <view class="divider"></view>
  <text class="time">发布时间：{{ articleItem?.createTime }}</text>
</template>
<style lang="scss" scoped>
.example-body {
  /* #ifndef APP-NVUE */
  display: block;
  /* #endif */
  padding: 10px;
}
.uni-text {
  font-size: 14px;
  line-height: 22px;
  color: #333;
}
.divider {
  margin: 10px;
  height: 1px;
  width: calc(100% - 20px);
  background-color: #f3f3f3;
}
.time {
  font-size: 12px;
  color: #999;
  margin: 0 0 0 10px;
}
</style>
